import { defineComponent, reactive } from "vue";
import styles from "./Insured.module.scss";
import SignRow from "../SignRow/SignRow";
import { IconFont } from '@nutui/icons-vue';
export default defineComponent({
  props: {
    form: {
      type: Object,
    },
    id_types: {
      type: Object,
    },
    areas: {
      type: Object,
    },
    places: {
      type: Object,
    },
  },
  emits: ['remove'],
  setup(props: any, { emit }) {
    const identitys = reactive({
      list: [
        {
          name: '本人',
          value: '17',
        },
        {
          name: '配偶',
          value: '22',
        },
        {
          name: '子女',
          value: '23',
        },
        {
          name: '父母',
          value: '21',
        },
        {
          name: '其他',
          value: '24',
        },
      ] as any,
    });
    // 被保人投保关系切换
    const insuredIdentityChange = (item: any, itemY: any) => {
      if (!(props.form.insured.some((x: any) => x.identity === '17') && itemY.value === '17')) {
        item.identity = itemY.value;
        if (item.identity !== '17') {
          item.name = '';
          item.id_type = '111';
          item.province_id = 1263;
          item.city_id = 1339;
          item.area_id = '';
          item.id_no = '';
          item.mobile = '';
          item.place = '';
        }
      }
    }
    return () => (
      <div class={styles['insured-container']}>
        {
          props.form.insured.map((item: any, index: number) => (
            <>
              <SignRow label={`被保险人${index + 1}`}>
                <div class={styles['close-container']}>
                  {
                    index > 0 && <div class={styles['close-area']} onClick={() => { emit('remove', index) }}>
                      <IconFont name="close" color="#2b8be9" class={styles['close-icon']} />
                    </div>
                  }
                </div>
              </SignRow>
              <SignRow label="为谁投保">
                <div class={styles.identitys}>
                  {
                    identitys.list.map((itemY: any) => (
                      <div
                        class={[
                          styles.identity,
                          props.form.insured.some((x: any) => x.identity === '17') && itemY.value === '17' && styles.disabled,
                          itemY.value === item.identity && styles.checked
                        ]}
                        onClick={() => { insuredIdentityChange(item, itemY) }}
                      >
                        {itemY.name}
                      </div>
                    ))
                  }
                </div>
              </SignRow>
              <SignRow label="被保险人姓名">
                <nut-input border={false} class={styles['sign-input']} v-model={item.name} placeholder="请输入被保险人姓名" />
                <div onClick={() => { item.name = '' }} v-show={item.name}>
                  <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
                </div>
              </SignRow>
              <SignRow
                label="证件类型"
              >
                <nut-input
                  readonly
                  border={false}
                  class={styles['sign-input']}
                  modelValue={props.id_types.list?.find?.((x: any) => x.value === item.id_type)?.text || ''}
                  placeholder="请选择被保险人证件类型"
                  onClick={() => {
                    props.id_types.insured_idx = index;
                    props.id_types.value = item.id_type ? [item.id_type] : [];
                    props.id_types.isShow = true
                  }}
                />
              </SignRow>
              <SignRow
                label="证件号码"
                onLabelClick={() => { }}
              >
                <nut-input border={false} onBlur={() => { item.id_no = item.id_no.toUpperCase() }} max-length={18} class={[styles['sign-input'], styles.uppercase]} v-model={item.id_no} placeholder="请输入被保险人证件号码" />
                <div onClick={() => { item.id_no = '' }} v-show={item.id_no}>
                  <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
                </div>
              </SignRow>
              <SignRow
                label="所在县(市、区)"
              >
                <nut-input
                  readonly
                  border={false}
                  class={styles['sign-input']}
                  modelValue={props.areas.list?.find?.((x: any) => x.id === item.area_id)?.name || ''}
                  placeholder="请选择被保险人所在县(市、区)"
                  onClick={() => {
                    props.areas.insured_idx = index;
                    props.areas.value = item.area_id ? [item.area_id] : [];
                    props.areas.isShow = true
                  }}
                />
                <div onClick={() => { item.area_id = '' }} v-show={item.area_id}>
                  <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
                </div>
              </SignRow>
              <SignRow
                label="医保归属地"
              >
                <nut-input
                  readonly
                  border={false}
                  class={styles['sign-input']}
                  modelValue={item.place}
                  placeholder="请选择被保险人医保归属地"
                  onClick={() => {
                    props.places.insured_idx = index;
                    props.places.value = item.place ? [item.place] : [];
                    props.places.isShow = true
                  }}
                />
                <div onClick={() => { item.place = '' }} v-show={item.place}>
                  <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
                </div>
              </SignRow>
              <SignRow label="手机号">
                <nut-input border={false} type="number" max-length={11} class={styles['sign-input']} v-model={item.mobile} placeholder="请输入被保险人手机号" />
                <div onClick={() => { item.mobile = '' }} v-show={item.mobile}>
                  <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
                </div>
              </SignRow>
              <nut-popup position="bottom" v-model:visible={props.areas.isShow}>
                <nut-picker field-names={{ text: 'name', value: 'id' }} v-model={props.areas.value} columns={props.areas.list} title="请选择区县"
                  onConfirm={(e: any) => {
                    if (props.areas.insured_idx === '') {
                      props.form.applicant.area_id = e.selectedOptions?.[0]?.id || '';
                    } else {
                      props.form.insured[props.areas.insured_idx].area_id = e.selectedOptions?.[0]?.id || '';
                    }
                    props.areas.isShow = false;
                  }}
                  onCancel={() => props.areas.isShow = false}
                >
                </nut-picker>
              </nut-popup>
              <nut-popup position="bottom" v-model:visible={props.places.isShow}>
                <nut-picker field-names={{ text: 'name', value: 'name' }} v-model={props.places.value} columns={props.places.list} title="请选择区县"
                  onConfirm={(e: any) => {
                    props.form.insured[props.places.insured_idx].place = e.selectedOptions?.[0]?.name || '';
                    props.places.isShow = false;
                  }}
                  onCancel={() => props.places.isShow = false}
                >
                </nut-picker>
              </nut-popup>
            </>
          ))
        }
      </div>
    )
  }
})